<template>
    <div class="color-fff">
        <div class="pb-20 container" id="long-container" ref="box" v-show="!empty">
            <el-row :gutter="20">
                <el-col :class="{'mt-18':index>5}" :key="index" :span="4" v-for="(item,index) in data">
                    <el-image :src="item.thumbnail" @click="toDetail(item)" class="cursor-pointer" fit="cover" style="width: 100%; height: 150px;border-top-left-radius:10px;border-top-right-radius:10px"></el-image>
                    <div class="pd-10 bg-action" style="border-bottom-left-radius:10px;border-bottom-right-radius:10px">
                        <div class="text-line1">
                            <span>{{item.name}}</span>
                            <span class="pl-10 color-eee" v-if="!item.done">(更新至{{item.current_episode}}集)</span>
                            <span class="pl-10 color-eee" v-else>(全{{item.episodes}}集)</span>
                        </div>
                        <div class="flex align-center jus-between mt-10">
                            <div class="flex align-center font-13 color-fff cursor-pointer" v-if="item.user_info">
                                <el-avatar :size="20" :src="item.user_info.avatar"></el-avatar>
                                <span class="pl-6">{{item.user_info.name}}</span>
                            </div>
                            <div class="flex align-center font-13 color-999 cursor-pointer">
                                <el-image :src="require('@/assets/icon/video/viewed.png')" fit="cover" style="width: 18px; height: 18px;"></el-image>
                                <span class="pl-6">{{item.total_viewed}}</span>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div v-if="data.length > 0" style="margin-top: 30px;text-align: center;color: #83818B;">
            -没有更多内容了-
        </div>
            <div class="text-center color-fff font-15 width-100% height-30">
                <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-show="append_loading"></el-image>
            </div>
        </div>
        <div class="flex jus-center flex-dre-column align-center" style="margin-top:15vh" v-show="empty">
            <el-image :src="require('@/assets/image/empty-black.png')" fit="cover" style="width: 15vw;height:15vw;"></el-image>
            <div class="mt-10 color-fff font-14">没找到相关内容</div>
        </div>
        <detail :collection="collection" ref="detail"></detail>
    </div>
</template>

<script>
import pageTool from '@/mixins/page'
import detail from '@/views/long/detail'
export default {
    components: {
        detail,
    },
    props: {
        keyword: String,
    },
    mixins: [pageTool],
    data() {
        return {
            query: {
                page: 1,
                size: 48,
                has_creation: 1,
            },
            // loading: false,
            choose_index: 0,
            empty: true,
            collection: {},
        }
    },
    mounted() {
        this.query.keyword = this.keyword
        this.beforeInit()
        let box = document.getElementById('long-container')
        box.addEventListener('scroll', this.scrollInfo)
    },
    methods: {
        beforeInit() {
            this.url = '/creation-collection/long_video_list'
            this.append = true
            this.methods = 'post'
            this.toInit()
        },
        toDetail(data) {
            // this.$router.push({ path: '/long/' + data.collection_id })
            if (!data.current_episode) {
                this.$message({
                    message: '暂无剧集',
                    type: 'warning',
                    customClass: 'messageClass',
                })
                return
            }
            this.collection = data
            this.$nextTick(() => {
                this.$refs.detail.visible = true
                this.$refs.detail.getCollection(data.collection_id)
            })
        },

        reset(keyword) {
            this.data = []
            this.query.keyword = keyword
            this.empty = false
            this.query.page = 1
            this.toInit()
        },
        toInit() {
            this.init()
                .then((res) => {
                    if (this.data.length == 0) {
                        this.empty = true
                    } else {
                        this.empty = false
                    }
                })
                .catch((err) => {})
        },
        scrollInfo() {
            let e = document.getElementById('long-container')
            if (e.scrollTop + e.clientHeight >= e.scrollHeight - 50) {
                this.scroll()
            }
        },
        scroll() {
            if (this.append_loading == true) {
                return false
            }
            this.query.page++
            this.toInit()
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    height: calc(100vh - 4rem - 69px);
    overflow-y: scroll;
}
.container::-webkit-scrollbar {
    display: none;
}
</style>